<script setup lang="ts">
import type { Media, MediaType } from '~/types'

withDefaults(
  defineProps<{
    type: MediaType
    item: Media
    isDelete?: boolean
    isShow?: boolean
  }>(),
  { isShow: true }
)

const emits = defineEmits(['handleDelete'])
function handleDelete(val: Media) {
  emits('handleDelete', val)
}
</script>

<template>
  <li pos-relative>
    <div
      v-if="isDelete"
      i-ep:circle-close
      pos-absolute
      right--2
      top--2
      z-90
      ma
      cursor-pointer
      font-size-5
      @click.stop="handleDelete(item)"
    />
    <NuxtLink :to="`/details/${type}/${item.tag_id}`" pb2 :title="item.video_name">
      <div block transition duration-400 bg-ccccccc hover="scale-105 z10">
        <div v-if="item.video_vertical_url" relative h-full w-full of-hidden border-rd-2 class="pb-140%">
          <div absolute-center h-full w-full>
            <ImgWrapper
              v-if="item.video_vertical_url"
              absolute
              :src="item.video_vertical_url"
              :alt="item.video_name"
              object-cover
            />
          </div>
          <p v-if="isShow" flex="~ items-center" pos-absolute right-1 top-1 border-rd-25 px-1 bg-00000080 bl-32406500>
            <BaseIcon name="eye" size="1.5" />
            <span mx-1 font-size-3.5>{{ item.play_count_total }}</span>
          </p>

          <!-- <p v-if="item.video_desc" pos-absolute bottom-0 left-0 right-0 px-2.5 py-1.25 font-size-3.25 bg-00000080>
            {{ item.video_desc }}
          </p> -->
        </div>
        <div v-else h-full flex op10>
          <div i-ph:question ma text-4xl />
        </div>
      </div>
      <h2 mt-2 truncate>
        {{ item.video_name }}
      </h2>
      <div flex items-center gap-2 text-sm>
        <p truncate op60>
          {{ item.main_actor }}
        </p>
      </div>
    </NuxtLink>
  </li>
</template>
